<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的用法</title>
    <!--CSS使用方式2:
        使用style标签统一赋值,与CSS选择器一起使用
        优点:可以样式复用
    -->
    <style>
        /*  CSS的注释
            选中页面中所有的h2元素,具体的样式写在{}中
        */
        h2{ /*标签名选择器 根据标签名选择页面元素*/
            color: blue;
            background-color: yellow;
        }
    </style>
    <!--
        CSS使用方式3:
         引用外部的CSS样式文件,需要在文件外创建.css文件,在css文件中写上
         对当前页面的样式设置代码,然后引入到当前页面,即可样式生效
         引入.css文件使用link标签,rel表示引入类型,href表示引入位置
         优点:复用的范围更广
    -->
    <link rel="stylesheet" href="my.css">
</head>
<body>
    <!--CSS使用方式1:
        在标签中使用style属性,样式设置: 样式的关键字1: 具体的值;样式的关键字2: 具体的值
        color 设置字体颜色
        background-color 设置背景颜色
        缺点:不能复用-->
    <h1 style="color: red;background-color: green">内联样式1</h1>
    <h1 style="color: red;background-color: green">内联样式2</h1>

    <h2>内部样式1</h2>
    <h2>内部样式2</h2>

    <h3>外部样式1</h3>
    <h3>外部样式2</h3>
</body>
</html>